<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3 text-justify-center">
    <a th:href="@{'/back/article/add'}" type="button" class="btn btn-primary">新增文章</a>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getCreate_date())}">2</td>
<!--            <td th:text="${article.getUserid()}">3</td>-->
            <td>

                <a class="btn btn-info" href="#" th:title="${article.getTitle()}" data-bs-toggle="popover" data-bs-trigger="focus" th:data-bs-content="${article.body}">详情</a>
                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>

                <a th:href="@{'/back/article/delete/'+${article.getId()}}"> <button type="button" class="btn btn-danger">删除</button></a>

<!--                <button type="button" class="btn btn-danger" th:onclick="deleteArtcile${article.id}">删除</button>-->
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
<script>
    // function deleteArticle(id){
    //     if (confirm("确认删除？")){
    //         location.replace(location.protocol+"//"+location.host+"/back/article/delete/"+id);
    //     }
    // }

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>
</html>